<template>
  <div class="createPost-container">
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <video width="100%" height="700" style="text-align:center;margin:0 auto;" controls="controls" autobuffer="autobuffer" autoplay="autoplay" loop="loop">
        <source :src="url" type="video/mp4">
      </video>
    </el-dialog>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-table
          :data="itemlist"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column prop="key" label="项目" width="300px" show-overflow-tooltip />
          <el-table-column prop="value" label="数据" min-width="300px" show-overflow-tooltip />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="图片" name="second">
        <el-table
          :data="item.photo"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column prop="title" label="标题" min-width="300px" show-overflow-tooltip />
          <el-table-column prop="datetime" label="时间" width="300px" show-overflow-tooltip />
          <el-table-column label="操作" min-width="200px">
            <template slot-scope="scope">
              <el-button size="small" @click="detail(scope.row.url)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="视频" name="third">
        <el-table
          :data="item.avi"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column prop="title" label="标题" min-width="300px" show-overflow-tooltip />
          <el-table-column prop="datetime" label="时间" width="300px" show-overflow-tooltip />
          <el-table-column label="操作" min-width="200px">
            <template slot-scope="scope">
              <el-button size="small" @click="detailvideo(scope.row.url)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'ArticleDetail',
  props: {
    item: {
      type: Object,
      default: null
    },
    timestamp: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      url: '',
      dialogVisible: false,
      baseurl: 'http://47.94.109.96:7749',
      videolist: [],
      photolist: [],
      activeName: 'first',
      itemlist: [],
      dic: [
        { key: 'org', title: '检测机构' },
        { key: 'vin', title: '车辆VIN' },
        { key: 'model', title: '车辆型号' },
        { key: 'place', title: '试验地点' },
        { key: 'firm', title: '生产企业' },
        { key: 'title', title: '车辆名称' },
        { key: 'type', title: '车辆类型' },
        { key: 'trail', title: '动态试验类型' },
        { key: 'manager', title: '管理员' },
        { key: 'person1', title: '试验员1' },
        { key: 'person2', title: '试验员2' },
        { key: 'monitor', title: '终端' },
        { key: 'start_date', title: '监测数据创建时间' },
        { key: 'status', title: '试验状态' },
        { key: 'remark', title: '备注' }
      ]
    }
  },
  watch: {
    timestamp: {
      handler(val, oldVal) {
        this.itemlist = []
        this.dic.forEach(item => {
          this.itemlist.push({ key: item.title, value: this.item[item.key] })
        })
        // this.item.map(item => { console.log(item) })
        // this.item.map(item => { this.itemlist.push({ key: item, value: this.item[item] }) })
        console.log(this.itemlist)
      },
      immediate: true
    }
  },
  methods: {
    detail(url) {
      window.open(this.baseurl + url)
    },
    detailvideo(url) {
      this.url = url
      this.dialogVisible = true
    }
  }
}
</script>
